<script setup lang="ts" name="uiSelect">
import { onMounted, ref } from 'vue'

interface Ioptions {
    id: number;
    name: number;
}
interface IpageData {
    pageNo: number;
    pageSize: number;
    total: number;
}
// 接收一些必要的配置项
const props = defineProps({
    val: {
        type: String,
        default: ''
    },
    // 选择框宽度
    width: {
        type: String,
        default: ''
    },
    // options弹窗宽度
    optionsWidth: {
        type: String,
        default: ''
    },
    // 配置项
    options: {
        type: Array,
        default: () => []
    },
    // 分页数据
    pageData: {
        type: Object,
        default: () => {
            return {
                pageNo: 1,
                pageSize: 10,
                total: 20
            }
        }
    }
})

const emit = defineEmits(['update:val', 'update:pageData', 'pageChange'])
const selectVal = ref('')
const page = ref({})
onMounted(() => {
    const { val, pageData } = props
    // element组件是支持select的双向绑定的，所以小编单独用了一个新的变量处理
    selectVal.value = val
    // 分页数据
    page.value = pageData
})
const selectChange = (item:any) => {
    // select选中值的更新
    emit('update:val', item)
}
const pageChange = () => {
    // 分页变化更新分页数据
    emit('update:pageData', page.value)
    // 同时emit一个方法，让父组件可以利用这个方法执行某些操作
    emit('pageChange')
}
</script>

<template>
    <div>
        <!-- v-bind="$attrs"小编前面有提到，就是完整的拿到父组件传的参数,从而不需要props再接一层 -->
        <!-- select 和 pagination都设置v-bind="$attrs"，继承两个组件的配置项 -->
        <!-- 注意：小编在封装的时候已经使用了一些element组件的配置项，如果父组件在使用时用了同名的属性，则会覆盖 -->
        <el-select v-model="selectVal" v-bind="$attrs" :style="{
            width: width || '100%'
        }" @change="selectChange" class="custom_select">
            <!-- 最小宽度是分页撑的宽度 -->
            <div :style="{
                width: optionsWidth || '100%'
            }" class="options_content">
                <!-- 这里使用到了插槽，主要是扩展我们二次封装的select组件是否可搜索或者再前面需要加什么内容…… -->
                <slot name="header" class="header"></slot>
                <!-- element的select的options配置项 -->
                <div class="options_main">
                    <el-option v-if="options.length > 0" v-for="item in options" :key="(item as Ioptions).id" :label="(item as Ioptions).name" :value="(item as Ioptions).id" />
                    <el-option class="nodata" v-else disabled value="暂无数据">暂无数据</el-option>
                </div>
                <!-- 分页组件 -->
                <!-- 注意这里也有v-bind="$attrs"使用 -->
                <el-pagination :current-page="(page as IpageData).pageNo" :page-size="(page as IpageData).pageSize" layout="prev, pager, next"
                    :total="(page as IpageData).total" @current-change="pageChange" v-bind="$attrs" class="pagination_page" />
            </div>
        </el-select>
    </div>
</template>

<style lang="scss" scoped>
.pagination_page {
    width: 100%;
    padding: 10px 20px 10px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
}

.options_main {
    // element select组件的弹窗是在根下的，不好直接设置弹窗的高，只能限制内容了
    height: 140px;
    overflow: auto;
    padding: 10px;
}

.nodata{
    text-align: center;
}

// ::-webkit-scrollbar {
//     width: 5px;
// }
</style>